<script setup>
import {RouterLink} from 'vue-router'
</script>

<template>
  <div id="main">
    <div id="sidebar">
      <div id="sidebar-content">
        <RouterLink
            v-for="category in categories"
            :key="category.id"
            :to="{ name: 'ProductList', params: { categoryId: category.id } }"
            exact-active-class="active-link"
            class="category-link"
        >
          <img :src="`/src/assets/images/${category.icon}`"/>
          <br/>
          {{ category.description }}
        </RouterLink>
      </div>
    </div>

    <div id="main-image">
      <div id="main-image-content">
        <map name="estoremap">
          <area
              v-for="area in imageAreas"
              :key="area.id"
              :alt="area.alt"
              :coords="area.coords"
              @click="$router.push({ name: 'ProductList', params: { categoryId: area.categoryId } })"
              style="cursor: pointer"
              shape="RECT"
              class="category-area"
          />
        </map>
        <img
            src="/src/assets/images/splash.gif"
            alt="Main Banner"
            usemap="#estoremap"
            class="main-banner"
            style="max-width: 100%; height: auto;"
        />
      </div>
    </div>
  </div>
</template>

<script>
const SCALE_FACTOR = 1.375; // 定义放大比例为 2 倍

function scaleCoords(coordsStr) {
  return coordsStr.split(',')
      .map(coord => Math.round(parseFloat(coord) * SCALE_FACTOR))
      .join(',');
}

export default {
  data() {
    return {
      categories: [
        {id: 'FISH', icon: 'fish_icon.gif', description: 'Saltwater, Freshwater'},
        {id: 'DOGS', icon: 'dogs_icon.gif', description: 'Various Breeds'},
        {id: 'CATS', icon: 'cats_icon.gif', description: 'Various Breeds, Exotic Varieties'},
        {id: 'REPTILES', icon: 'reptiles_icon.gif', description: 'Lizards, Turtles, Snakes'},
        {id: 'BIRDS', icon: 'birds_icon.gif', description: 'Exotic Varieties'}
      ],
      imageAreas: [
        {
          id: 'FISH1',
          alt: 'Fish',
          coords: scaleCoords('32,210,102,280'),
          categoryId: 'FISH',
          title: '查看水族商品'
        },
        {
          id: 'DOGS1',
          alt: 'Dogs',
          coords:  scaleCoords('90,280,160,350'),
          categoryId: 'DOGS',
          title: '查看犬类商品'
        },
        {
          id: 'REPTILES1',
          alt: 'Reptiles',
          coords: scaleCoords('170,300,240,370'),
          categoryId: 'REPTILES',
          title: '查看爬虫商品'
        },
        {
          id: 'CATS1',
          alt: 'Cats',
          coords:scaleCoords('255,270,325,340'),
          categoryId: 'CATS',
          title: '查看猫类商品'
        },
        {
          id: 'BIRDS1',
          alt: 'Birds',
          coords: scaleCoords('310,200,400,280'),
          categoryId: 'BIRDS',
          title: '查看鸟类商品（区域1）'
        },
        {
          id: 'BIRDS2',
          alt: 'Birds',
          coords:scaleCoords('102,32,310,280'),
          categoryId: 'BIRDS',
          title: '查看鸟类商品（区域2）'
        }
      ]
    }
  }
}
</script>

<style scoped>
#main {
  display: flex;
  min-height: 500px;
  margin-top: 80px;
}

#sidebar {
  width: 20%;
  padding: 20px 0;
  border-right: 1px solid #eee;
  margin-left: 152px;
}

.category-link {
  display: block;
  margin-bottom: 15px;
  padding: 10px 0;
  text-align: center;
  position: relative;
}

#main-image {
  flex: 1;
  display: flex;
  padding: 20px;
  margin-left: 20px;
  overflow: visible;

}

.main-banner {
  width:550px;
  height: auto;
  margin-left: 113px;
  max-width: 50%;
}

.category-link {
  position: relative;
  padding: 10px 0;
  transition: transform 0.2s;
}

.category-link:hover {
  transform: translateX(5px);
}

.category-link::after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #eee;
  margin: 10px auto;
}


</style>